<template>
  <div>
    <div class="banner">
      <div class="swiper-container" id="swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../images/banner1.jpg">
          </div>
          <div class="swiper-slide"> 
            <img src="../images/banner2.jpg">
          </div>
          <div class="swiper-slide"> 
            <img src="../images/banner3.jpg">
          </div>
        </div>
        <div class="swiper-pagination" slot="pagination"></div>
      </div>
    </div>

    <div class="title">
      <h3>
        荣誉列表
      </h3>
    </div>
    <h3-scroll
      ref="scroll"
      :loadMore="loadMore"
      :pageSize="pageSize"
      v-if="isEmpty">
      <div>
        <div class="list-wrapper" v-for="(item,index) in honorList" :key="index">
          <div class="list-concent">
            <div class="list-top">
              <div class="list-top-left">
                <div class="name">{{ item.data.originator }}</div>
                <div>{{ item.data.ShortText1604042652419 }}</div>
              </div>
              <div class="list-top-right">
                {{ item.data.RelevanceForm1604039304001.rewardName }}
              </div>
            </div>
            <div class="list-bottom">
              {{ item.data.rewardName }}
            </div>
           
          </div>

        </div>
      </div>
    </h3-scroll>
  </div>

</template>
<script lang="ts">
import axios from 'axios';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { homeApi, mobileHome } from '@cloudpivot/api';
import mobile from '@cloudpivot/form/src/renderer/components/mobile';
import Common from '@cloudpivot/common/mobile';
import { H3Datetime } from 'h3-mobile-vue';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css'
// import  "swiper/swiper-bundle.min.js"


@Component({
  name: 'honor-list',
  components: {
    Empty: Common.components.Empty,
    H3Scroll: mobile.H3Scroll,
    H3Datetime,
  }
})
export default class HonorList extends Vue {



  pageSize: number = 20;

  page: number = 0;

  isEmpty: boolean = true;
  honorList: any = [];
  effect:number = 0
  
  // 参数
  get params() {
    return   {
      "filters": [
        {
          "propertyCode": "sequenceStatus",
          "propertyType": 0,
          "propertyValue": "PROCESSING;COMPLETED;CANCELED;DRAFT"
        }
      ],
      "mobile": true,
      "queryCode": "",
      "schemaCode": "reward1",
      "page": this.page,
      "size": this.pageSize
    }
  }


  loadMore(page: any, done: any) {
    console.log(page.num,'num')
    console.log(12111111111111111111)
    const vm: any = this;
    vm.page = page.num-1;

    if (vm.page === 1) {
        vm.page = page.num-1;
      // vm.honorList = [];
    }
    axios
      .post('/api/runtime/query/list', this.params)
      .then((res: any) => {
        if (!res.data.content) {
          return;
        }

        if (done) {
          done(vm.pageSize, res.total);
        }
        vm.honorList = vm.honorList.concat(res.data.content);
        console.log(vm.honorList ,'vm.honorList ')

        if (!vm.honorList.length) {
          vm.isEmpty = false;
        }
      });

      console.log(this.honorList,'honorList')
  }

initSwiper(){
    var mySwiper = new Swiper (".swiper-container",{
        // observer:true,//修改swiper自己或子元素时，自动初始化swiper
        // autoplay:30000000,
        // //  slidesPerView:3,
        // loop: true,
        // // sapceBetween:60,
        // centeredSlides:true, 
        // observeParents:true,//修改swiper的父元素时，自动初始化swiper
        // pagination: '.swiper-pagination',
        // paginationClickable: true,
        // disableOninteraction:false,

          direction: 'horizontal',
          loop: true,
          autoplay: 30000,
          slidesPerView: "auto",
          centeredSlides:true,
          // spaceBetween: 20,
          // 如果需要分页器
          pagination: '.swiper-pagination',
        
    } )
} 
 mounted() {
    this.initSwiper()
  }


}
</script>
<style lang="less" scoped>

@import '~@cloudpivot/common/styles/mixins.less';
.mescroll {
  position: fixed;
  top: 200px;
  bottom: 0;
  height: auto;
  z-index: 2;
}
.item {
  background-color: #fff;
  position: relative;
  font-size: 15px;
  display: flex;
  padding-left: 10px;
  .px2rem(margin, @horizontal-padding-md);
  .px2rem(border-radius, @border-radius-lg);

  &__title {
    color: #333333;
    display: flex;
  }

  &__desc {
    // color: #999999;
    display: flex;
    .px2rem(margin-top, @horizontal-padding-sm);
    .item-desc-lable{
      font-weight: 600;
    }
  }

  &__center {
    flex-grow: 1;
    position: relative;
    .px2rem(margin, @horizontal-padding-lg);
    margin-left: 0;
  }

  &__status {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;

    /deep/img {
      width: 1.6rem !important;
      height: 1.28rem !important;
    }
  }
}

.search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.16rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  border-bottom: 1px solid #e6ebf6;
  background-color: white;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9;
  .search-header-inner {
    position: absolute;
    right: 0.4rem;
    display: flex;
    line-height: 0.7rem;
    span {
      padding-right: 0.13333333rem;
      font-size: 0.4rem;
    }

    .icon {
      font-size: 10px;
    }
  }
}
.searchModal {
  z-index: 9;
  position: absolute;
  top: 1.16rem;
  bottom: 44px;
  left: 0;
  right: 0;
  background: #fff;
  .searchRow {
    line-height: 30px;
    display: flex;
    font-size: 15px;
    position: relative;
    padding: 10px 15px;
    .searchTitle {
      color: #000;
      font-weight: 700;
      text-align: left;
      width: 100px;
    }
    .searchInput {
      border-width: 0;
      line-height: 30px;
      flex: 1 0;
      color: #333;
      font-size: 15px;
      -webkit-appearance: none;
      padding: 0;
      border: 0;
      background-color: transparent;
      overflow: visible;
      display: block;
      resize: none;
      word-break: break-all;
      word-wrap: break-word;
      font-family: Avenir, Helvetica, Arial, sans-serif;
    }
    &:after {
      content: '';
      position: absolute;
      background-color: #999999;
      display: block;
      z-index: 1;
      top: auto;
      right: auto;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}
.form-actions {
  text-align: center;
  bottom: 0;
  position: fixed;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-around;
  color: @primary-color;
  background-color: #fff;
  .px2rem(font-size, @font-size-base);
  height: 44px;
  &__item {
    flex-grow: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    &:not(:last-child) > div {
      width: 100%;
      position: relative;

      &::after {
        content: '';
        height: @font-size-20;
        width: 1px;
        background: #eeeeee;
        position: absolute;
        right: 0;
      }
    }

    i {
      margin-right: 8px;
    }
  }
}
.swiperOne{
  width:100px;
  height:200px;
  .swiper-swiper{
    width: 100%;
    height: 100%;
    background: pink;
  }
}

.banner{
  // padding:10px 0;
  background: #fff;
}

.swiper-container {
  width: 100%;
  height: 160px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  	//   transition: 300ms;
	  // transform: scale(0.9);
  img{
    width: 100%;
    height: 100%;
  }
}


// .swiper-container {
//     width: 100%;
//     height: 140px;
//     background: #fff;
//     overflow: visible!important;
// }
// .swiper-container .swiper-wrapper .swiper-slide{ width: 80%; border-radius: 10px;}
// .swiper-container .swiper-wrapper .swiper-slide img{width: 100%; height: 120px; border-radius: 10px;}
// .swiper-container .swiper-wrapper .swiper-slide-prev{ margin-top: 10px; height: 120px !important;}
// .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 120px !important;}
// .swiper-container .swiper-wrapper .swiper-slide-next{ margin-top: 10px; height: 120px!important;}
// .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 120px!important;}
// .swiper-container .swiper-wrapper .swiper-slide-active{ width: 80%;}
// .swiper-container .swiper-wrapper .swiper-slide-active img{ height: 140px !important;}

// .swiper-pagination .swiper-pagination-bullet{width: 12px; height: 12px; background: #ff1e1e;}
// .swiper-pagination .swiper-pagination-bullet-active{width: 21px; height: 12px; background: #e75230; border-radius: 6px;}


.title{
  padding:10px 20px;
  background: #fff;
  h3{
    font-size: 600;;
    width: 100%;
    text-align: left;
    font-size: 16px;
  }
}

.list-wrapper{
  padding:0 10px;
  margin-top:10px;

  // background-image: linear-gradient(to right, #ed4264 , #ffedbc );

  .list-concent{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    // background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
    // background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
  background: #fff;
    // box-shadow: rgba(0, 0, 0, 0.02) 0px 5px 15px;
    padding:10px;
    border-radius: 5px;
  }
}
.list-top{
  display: flex;
  justify-content: space-between;
  margin:10px 0;
  width:100%;
  // #ef3f61
}
.list-top-left{
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
  .name{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
.list-top-right{
  color:#e23e57 ;
   font-size: 14px;

}
</style>
